Skip to content

Fix(CSS): clamp() with bare arithmetic produces empty styles#415

Merged
1aron merged 1 commit intomaster-co:rcfrom
0Miles:fix/358-clamp-empty-style
May 3, 2026
Merged

Fix(CSS): clamp() with bare arithmetic produces empty styles#415
1aron merged 1 commit intomaster-co:rcfrom
0Miles:fix/358-clamp-empty-style

Conversation

@0Miles
Copy link
Copy Markdown
Contributor

@0Miles 0Miles commented Apr 30, 2026

Closes #358.

Summary

`clamp(1.5rem, 2vw+1rem, 2.25rem)` produced output that browsers reject. CSS spec requires whitespace around `+`/`-` even inside math functions; without `calc()` wrapping, Chrome falls back to default font-size.

Changes

  • New `function-transformers/core.math-fn.ts` — splits clamp args on top-level commas, wraps any arg with infix arithmetic in `calc()` and inserts spec-required spaces around `+`/`-`. Doesn't double-wrap `calc()`/`min()`/`max()`/`var()` and doesn't misclassify unary signs (`-1rem`).
  • `config/functions.ts` — `clamp` registered with `transformer: ['core.math-fn', { name: 'clamp' }]`
  • New `tests/issue-358-clamp.test.ts` — 6 cases including regression for already-wrapped clamp + negative leading values
  • `css-docs/modules/core.md` documents the new transformer

Scope note

Only `clamp` is fixed in this PR. Adding the transformer to `min`/`max` broke 5 existing tests that rely on a different code path (number-with-baseUnit conversion). `min`/`max` with bare arithmetic remains a known issue, scoped for a separate PR.

Testing

  • 6/6 new tests pass; 109 core test files still pass
  • Real Chrome verification via `agent-browser`: pre-fix output `clamp(1.5rem,2vw+1rem,2.25rem)` → font-size = 16px (default, declaration rejected); post-fix `clamp(1.5rem, calc(2vw + 1rem), 2.25rem)` → font-size = 36px (clamp activated correctly)

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 30, 2026

@0Miles is attempting to deploy a commit to the Aoyue Team on Vercel.

A member of the Team first needs to authorize it.

@0Miles 0Miles changed the title fix(core): auto-wrap bare arithmetic in clamp() args with calc(), resolve #358 Fix(CSS): clamp() with bare arithmetic produces empty styles Apr 30, 2026
clamp(1.5rem, 2vw+1rem, 2.25rem) produced output that browsers reject —
CSS spec requires whitespace around + and - even inside math functions.

- New function-transformers/core.math-fn.ts: splits clamp args on
  top-level commas, wraps any arg with infix arithmetic in calc(),
  inserts spec-required spaces around + and -
- Doesn't double-wrap calc()/min()/max()/var()
- Doesn't misclassify unary signs (-1rem)
- 6 test cases, including regression for already-wrapped clamp
- Updates css-docs/modules/core.md

Scope: clamp only. min/max with bare arithmetic stays a known issue
(transformer breaks 5 existing tests for those — different code path).

Verified in real Chrome: pre-fix font-size = 16px (default, declaration
rejected); post-fix = 36px (clamp activated).

Closes master-co#358
@0Miles 0Miles force-pushed the fix/358-clamp-empty-style branch from 40e15af to 1f7362a Compare April 30, 2026 19:01
@1aron 1aron merged commit 7c6423a into master-co:rc May 3, 2026
12 of 13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🐞 clamp() function does not work correctly

2 participants